<template>
    <div class="warp">
        <van-list
            v-if="list.length"
            v-model="pagination.loading"
            :finished="pagination.finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onLoad"
        >
            <van-radio-group v-model="check.id" @click="changeMainPilot">
                <van-radio v-for="(item, index) in list" :key="item.userId" :name="item.userId" icon-size="0.4rem" shape="square">
                    <van-row>
                        <van-col span="8">
                            <span>姓名：</span>
                            <span>{{item.name}}</span>
                        </van-col>
                        <van-col span="8">
                            <span>账号：</span>
                            <span>{{item.username}}</span>
                        </van-col>
                        <van-col span="8">
                            <span>操作：</span>
                            <span @click.stop="handleCheck(item, index)" style="color: #1976d2">{{ item.checked ? '取消选中' : '选中' }}</span>
                        </van-col>
                    </van-row>
                    <van-row>
                        <van-col span="8">
                            <span>手机：</span>
                            <span>{{item.phone}}</span>
                        </van-col>
                        <van-col span="8">
                            <span>常住地：</span>
                            <span>{{`${item.provinceName}-${item.cityName}-${item.areaName}`}}</span>
                        </van-col>
                        <van-col span="8">
                            <span>主飞手：</span>
                            <span></span>
                        </van-col>
                    </van-row>
                    <van-row>
                        <van-col span="24" style="display: flex">
                            <span>承接任务：</span>
                            <div :class="item.showAll ? 'isAll' : 'notAll'">
                                <div v-for="(task, subIndex) in item.task" :key="task.taskId">
                                    <span>{{task.number}}</span>
                                    <span>{{task.name}}</span>
                                    <span v-if="item.task.length > 1 && subIndex === 0" style="margin-left: 0.3rem" @click.stop="toggerShow(item, index)">
                                        <span>等{{item.task.length}}个</span>
                                        <van-icon :name="item.showAll ? 'arrow-up' : 'arrow-down'" color="#1976d2"/>
                                    </span>
                                </div>
                            </div>
                        </van-col>
                    </van-row>
                </van-radio>
            </van-radio-group>
        </van-list>
        
        <Empty v-else />
        
        <div class="checked container-fixed">
            <span>已选中飞手：{{checkedPilot}}</span>
            <van-button size="mini" type="primary" @click="handleConfirm()">确 定</van-button>
        </div>
    </div>
</template>

<script>
import Empty from '@/components/Empty'
import { Toast } from 'vant'

import { DispatchPilot } from '@/api/task'
export default {
    components: {
        Empty
    },
    data(){
        return {
            id: undefined,
            // checkId: undefined,
            showAll: false,
        }
    },
    computed: {
        list(){
            // if(!this.checkId){

            // }
            // let list = this.List(),
            //     item = list[0]
            // this.checkId = item ? item.userId : undefined
            return this.List()
        },
        pagination(){
            return this.Pagination()
        },
        checkedPilot(){
            return this.list.filter(item => item.checked).map(ck => ck.username || '未知账号').join(',')
        },
        check(){
            console.log(this.Check())
            return this.Check()
        },
    },
    methods: {
        handleCheck(item, index){
            item.checked = !item.checked
            let { check } = this
            if(item.userId === check.id && !item.checked){
                console.log('取消选择')
                this.check.id = undefined
            }  
            // this.checkId = undefined
            this.list.splice(index, item)
        },
        async handleConfirm(){
            let { id, check } = this,
                data = this.list.filter(item => item.checked).map(ck => {
                    return {
                        ...ck,
                        isMain: ck.userId === check.id ? 1 : 0
                    }
                })
            let statuss = data.some(item=>item.isMain)
            if(!statuss){
                return Toast.fail('请选择主飞手,否则没有飞手可审批该任务')
            }
            if(!data.length){
                return Toast.fail('请选择飞手')
            }
            let { status } = await DispatchPilot(id, data)
            if(status === 1){
                
                Toast.success('操作成功！')
                this.$router.go(-1)
            }
        },
        toggerShow(item, index){
            item.showAll = !item.showAll
            this.list.splice(index, item)
        },
        changeMainPilot(){
            console.log('aaaaaaaaaa')
        },
        async onLoad(){
            this.pagination.pageNo += 1
            await this.GetList()

            // 加载状态结束
            this.pagination.loading = false;

            // 数据全部加载完成
            let { total } = this.pagination
            if (this.list.length >= total) {
                this.pagination.finished = true;
            }
            
        },

    },
    mounted(){
        this.id = this.$route.params.id
        setTimeout(() => {
            let { list } = this,
                item = list[0]
            // this.check.id = (item && !this.check.id) ? item.userId : this.check.id
        }, 500);
    },
    inject: ['List', 'Pagination', 'GetList', 'Check']
}
</script>

<style lang="scss" scoped>
.warp{
    text-align: left;
    font-size: .266667rem;
    padding-bottom: 1rem;
    .isAll{
        height: auto;
    }
    .notAll{
        height: 0.5rem;
        overflow: hidden;
    }
}
::v-deep{
    .van-radio-group{
        background: #e5eff6;
        
        .van-radio{
            position: relative;
            padding: .133333rem .266667rem;
            border-bottom: .026667rem #d9d9d9 solid;
            .van-radio__label{
                margin-left: 0;
                width: 100%;
                .van-row{
                    padding: .1rem 0;
                }
            }
            .van-radio__icon{
                position: absolute;
                top: 1.133333rem;
                left: 78%;
                transform: translateY(-50%);
            }
        }
    }
}
.checked{
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: .2rem .2rem;
    > span{
        font-size: .24rem;
        padding-right: 1rem;
        word-break: break-all;
    }
    ::v-deep{
        .van-button{
            flex-shrink: 0;
        }
    }
}
</style>